<?=View::factory('header')?>
<div id="banner" style="background:url('<?=URL::site('images/index-banner-1.jpg')?>') center no-repeat; height:468px; cursor:pointer;"></div>
<div id="index-items">
	<a href="#"><img src="<?=URL::site('images/index-item-1.jpg')?>" /></a>
	<a href="#"><img src="<?=URL::site('images/index-item-2.jpg')?>" /></a>
	<a href="#"><img src="<?=URL::site('images/index-item-3.jpg')?>" /></a>
	<a href="#"><img src="<?=URL::site('images/index-item-4.jpg')?>" /></a>
</div>
<?=View::factory('footer')?>
<script type="text/javascript">
$(document).ready(function() {
    var images = [
            '<?=URL::site('images/index-banner-1.jpg')?>',
            '<?=URL::site('images/index-banner-2.jpg')?>',
            '<?=URL::site('images/index-banner-3.jpg')?>'
        ],
        index = 0,
        $banner = $('#banner');

    setInterval(function() {
        if (index++ > images.length - 2) {
            index = 0;
        }
        $banner.fadeOut(function() {
            $banner.css('background', 'url(' + images[index] + ') center no-repeat').fadeIn();
        })
    }, 2000);
});
</script>